<template>
  <div
    id="slide"
    :class=" ['left','slide', $store.state.isMenuShow == true ? 'showSlide' : 'hidSlide',{'menuBig' : !$store.state.isCollapse,'menuSmall': $store.state.isCollapse}]"
  >
    <!-- <div @click="isShow" id="btnClose">
      <i :class="{'unfold': $store.state.isCollapse,'up': !$store.state.isCollapse}"></i>
    </div>-->
    <!-- 整个左边侧边栏主模板(正常模式) -->
    <div v-if="!$store.state.isCollapse">
      <slidetop></slidetop>
      <slidemid></slidemid>
      <slideInformation></slideInformation>
    </div>
    <!-- 整个左边侧边栏主模板(视频模式) -->
    <div v-if="$store.state.isCollapse">
      <slideSmallMid></slideSmallMid>
      <slideSmallInformation></slideSmallInformation>
    </div>
  </div>
</template>
<script>
import slidetop from "@/components/slide/slideContent/slidetop";
import slidemid from "@/components/slide/slideContent/slidemid";
import slideInformation from "@/components/slide/slideContent/SlideInformation";
import slideSmallMid from "@/components/slide/slideContent/slideSmallMid";
import slideSmallInformation from "@/components/slide/slideContent/slideSmallInformation";
import { throttle } from "@/common/common.js";

export default {
  name: "slide",
  created() {
    window.closeVideo = this.closeVideo;
    this.judgeMenu();
  },
  mounted() {
    window.addEventListener("resize", () => {
      this.change();
    });
  },
  data: {
    // isMenu: false
  },
  methods: {
    // 监听屏幕变化
    change: throttle(function() {
      if (document.body.clientWidth <= 768) {
        this.$store.commit("isMobile");
      } else {
        this.$store.commit("isPc");
      }
    }, 500),
    // 判断是否为mobile
    _isMobile() {
      let flag = navigator.userAgent.match(
        /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
      );
      return flag;
    },
    // 判断当前运行环境切换菜单栏
    judgeMenu() {
      if (this._isMobile()) {
        // console.log("手机端");
        this.$store.commit("isMobile");
      } else {
        // console.log("pc端");
        this.$store.commit("isPc");
      }
    },
    isShow() {
      // this.$store.state.isCollapse = !this.$store.state.isCollapse;
      this.$store.commit("showMenu");

      if (this.$store.state.isCollapse) {
        if (
          navigator.userAgent.match(
            /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
          )
        ) {
          //console.log('手机端');
          //console.log(navigator.userAgent)
          let u = navigator.userAgent;
          let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
          let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
          if (isAndroid) {
            //当前是安卓时执行
            //this.$toast.center('当前是安卓时执行');
            try {
              AndroidApp.JoinRoom("1");
            } catch (e) {}
          } else if (isiOS) {
            //当前是IOS时执行
            //this.$toast.center('当前是IOS时执行');
            try {
              window.webkit.messageHandlers.JoinRoom.postMessage("");
            } catch (e) {}
          }
        } else {
          //console.log('PC端');
        }
      }
    },
    closeVideo() {
      // this.$store.state.isCollapse = false;
      this.$store.commit("isMobile");
    }
  },
  components: {
    slidetop,
    slidemid,
    slideInformation,
    slideSmallMid,
    slideSmallInformation
  }
};
</script>
<style scoped>
.slide {
  position: relative;
  height: 100vh;
  max-height: 100vh;
  background-color: #f7f7f7;
  max-width: 254px;
  box-shadow: 3px 0 5px #ddd;
  z-index: 999;
}
#slide .box-content,
#slide #slideTop,
#slide #slideMid {
  padding-top: 15px;
}
#btnClose {
  position: absolute;
  top: 5px;
  right: 0px;
  width: 30px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}
#btnClose i {
  display: inline-block;
  height: 15px;
  width: 15px;
  background-image: url("../../../static/images/collapseLeft.png");
}
#btnClose i.unfold {
  background-image: url("../../../static/images/expandRight.png");
}

@media screen and (max-width: 768px) {
  /* .slide {
    min-width: 65.5px;
  } */
  /* .showSlide{
        display: block;
      }
      .hidSlide{
        display: none;
      } */
}
</style>

